<template>
	<view>
		<view style="background-color: #f4f5f7">
			<view style="padding: 0.3rem; text-align: center">-商户信息-</view>
		</view>

		<view class="inputS">
			<u-form :model="form" ref="uForm">
				<u-form-item placeholder="123" class="item-height" prop="name" label-width="auto" label="商户名称:">
					<u-input v-model="form.name" placeholder='请填写商户名称' />
				</u-form-item>
				<u-form-item class="item-height" prop="intro" label-width="auto" label="商户账号:">
					<u-input v-model="form.intro" placeholder='请填写商户账号' />
				</u-form-item>
				<u-form-item class="item-height" prop="intro" label-width="auto" label="账号密码:">
					<u-input v-model="form.pwd" placeholder='请填写商户登录账号密码' />
				</u-form-item>
				<u-form-item class="item-height" prop="sex" label-width="auto" label="联系手机号:">
					<u-input v-model="form.phone" placeholder='请填写商户联系手机号' />
				</u-form-item>
			</u-form>
		</view>

		<view style="background-color: #f4f5f7">
			<view style="padding: 0.3rem; text-align: center">-商户网点-</view>
		</view>

		<view class="inputS">
			<u-form :model="form" ref="uForm">
				<u-form-item class="item-height" prop="name" label-width="auto" label="网点名称:">
					<u-input v-model="form.storeName" placeholder='请填写铺货网点名称' />
				</u-form-item>
				<u-form-item class="item-height" prop="intro" label-width="auto" label="网点电话:">
					<u-input v-model="form.storePhone" placeholder='请填写铺货网点电话' />
				</u-form-item>

				<u-form-item class="item-height" prop="sex" label-width="auto" label="网点位置:">
					<view slot="right">
						<view>
							<image @click="goMap" style="width: 0.6rem;padding: 0rem 0.5rem;height: 1rem;" src="../../style/image/myPos/map.png"
							 alt="">
						</view>
					</view>
					<u-input v-model="form.storeAddress" :disabled='true' placeholder="请填写铺货网点地址" />
				</u-form-item>

				<u-form-item class="item-height" prop="intro" label-width="auto" label="">
					<u-input v-model="form.storeDetailAddress" placeholder='备注详细地址' />
				</u-form-item>
				<u-form-item class="item-height" prop="sex" label-width="auto" label="网点经纬度:">
					<u-input v-model="form.storePoint" placeholder='请填写经纬度' />
				</u-form-item>

				<u-form-item class="item-height" prop="trade" label-width="auto" label="网点行业:">
					<view slot="right">
						<view style="display: flex;align-items: center;" @click="selectShowM">
							<image style="width: 0.4rem;padding: 0.5rem; height: 0.8rem;" src="../../style/image/cargo/back.png" alt="">
						</view>
					</view>
					<u-input v-model="form.storeType" :disabled='true' placeholder="请选择网店行业" />
				</u-form-item>

				<u-form-item class="business" style="padding-left: 1rem;">
					<u-form-item class="item-height" prop="sex" label-width="auto" label="营业时间:">
						<u-input @click="timeShowM('start')" v-model="form.storeStart" :disabled='true' placeholder="10:00" input-align="center"  style="margin-left: 5px;" />
					</u-form-item>

					<u-form-item class="item-height" prop="sex" label-width="auto" label="至" style="margin:0 0.7rem 0 0.3rem">
						<u-input @click="timeShowM('end')" v-model="form.storeEnd" :disabled='true' placeholder="17.00"  input-align="center"/>
					</u-form-item>
				</u-form-item>
			</u-form>
		</view>

		<u-select v-model="timeShow" mode="mutil-column" :list="timeList" @confirm="timeConfirm"></u-select>
		<u-select mode="mutil-column-auto" @confirm="confirmM" value-name='id' label-name='name' child-name='level2' v-model="selectShow"
		 :list="selectList"></u-select>

		<view class="footP">
			<view @click="addprofitM" style="padding: 0.7rem; display: flex; align-items: center">
				<!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
				<view style="color: white; margin-left: 0.2rem">下一步</view>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		saveShopBranch,
		findBranchSite
	} from "../../utils/uniApi";

	import {
		AppModule
	} from '../../store/modules/app'
	import uForm from '../../uview-ui/components/u-form/u-form.vue'
	import uFormItem from '../../uview-ui/components/u-form-item/u-form-item.vue'
	import uInput from '../../uview-ui/components/u-input/u-input.vue'

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			'u-form': uForm,
			'u-form-item': uFormItem,
			'u-input': uInput
		}
	})

	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public form = {
			name: "",
			intro: "",
			pwd: "",
			phone: "",
			storeName: "",
			storePhone: "",
			storeAddress: "",
			storeDetailAddress: "",
			province: "",
			city: "",
			area: "",
			storePoint: "",
			storeTypeId: "",
			storeType: "",
			storeStart: "",
			storeEnd: ""
		};

		public timeShow = false; //选择时间的select
		public timeValue = ''; //选择时间的类型
		public selectShow = false; //行业选择select
		public selectList = [];
		public timeList = [
			[{
					value: "-1",
					label: "上午",
				},
				{
					value: "-2",
					label: "下午",
				},
			],
			[{
					value: "1",
					label: "00",
				},
				{
					value: "2",
					label: "01",
				},
				{
					value: "3",
					label: "02",
				},
				{
					value: "4",
					label: "03",
				},
				{
					value: "5",
					label: "04",
				},
				{
					value: "6",
					label: "05",
				},
				{
					value: "7",
					label: "06",
				},
				{
					value: "8",
					label: "07",
				},
				{
					value: "9",
					label: "08",
				},
				{
					value: "10",
					label: "09",
				},
				{
					value: "11",
					label: "10",
				},
				{
					value: "12",
					label: "11",
				},
				{
					value: "13",
					label: "12",
				},
			],
			[{
					value: "25",
					label: "00",
				}, {
					value: "26",
					label: "01",
				}, {
					value: "27",
					label: "02",
				}, {
					value: "28",
					label: "03",
				},
				{
					value: "29",
					label: "04",
				}, {
					value: "30",
					label: "05",
				}, {
					value: "31",
					label: "06",
				}, {
					value: "32",
					label: "07",
				},
				{
					value: "33",
					label: "08",
				}, {
					value: "34",
					label: "09",
				}, {
					value: "35",
					label: "10",
				}, {
					value: "36",
					label: "11",
				},
				{
					value: "37",
					label: "12",
				}, {
					value: "38",
					label: "13",
				}, {
					value: "39",
					label: "14",
				}, {
					value: "40",
					label: "15",
				},
				{
					value: "41",
					label: "16",
				}, {
					value: "42",
					label: "17",
				}, {
					value: "43",
					label: "18",
				}, {
					value: "44",
					label: "19",
				},
				{
					value: "45",
					label: "20",
				}, {
					value: "46",
					label: "21",
				}, {
					value: "47",
					label: "22",
				}, {
					value: "48",
					label: "23",
				},
				{
					value: "49",
					label: "24",
				}, {
					value: "50",
					label: "25",
				}, {
					value: "51",
					label: "26",
				}, {
					value: "52",
					label: "27",
				},
				{
					value: "53",
					label: "28",
				}, {
					value: "54",
					label: "29",
				}, {
					value: "55",
					label: "30",
				}, {
					value: "56",
					label: "31",
				},
				{
					value: "57",
					label: "32",
				}, {
					value: "58",
					label: "33",
				}, {
					value: "59",
					label: "34",
				}, {
					value: "60",
					label: "35",
				},
				{
					value: "61",
					label: "36",
				}, {
					value: "62",
					label: "37",
				}, {
					value: "63",
					label: "38",
				}, {
					value: "64",
					label: "39",
				},
				{
					value: "65",
					label: "40",
				}, {
					value: "66",
					label: "41",
				}, {
					value: "67",
					label: "42",
				}, {
					value: "68",
					label: "43",
				},
				{
					value: "69",
					label: "44",
				}, {
					value: "70",
					label: "45",
				}, {
					value: "71",
					label: "46",
				}, {
					value: "72",
					label: "47",
				},
				{
					value: "73",
					label: "48",
				}, {
					value: "74",
					label: "49",
				}, {
					value: "75",
					label: "50",
				}, {
					value: "76",
					label: "51",
				},
				{
					value: "77",
					label: "52",
				}, {
					value: "78",
					label: "53",
				}, {
					value: "79",
					label: "54",
				}, {
					value: "80",
					label: "55",
				},
				{
					value: "81",
					label: "56",
				}, {
					value: "82",
					label: "57",
				}, {
					value: "83",
					label: "58",
				}, {
					value: "84",
					label: "59",
				},
			],
		];


		public rules = {
			name: [{
				required: true,
				message: "请输入姓名",
				// 可以单个或者同时写两个触发验证方式
				trigger: ["change", "blur"],
			}, ],
			intro: [{
				// min: 5,
				message: "简介不能少于5个字",
				// trigger: 'change'
			}, ],
		};

		onReady() {

			// this.$refs.uForm.setRules(this.rules);
			(this.$refs['uForm'] as any).setRules(this.rules)

			console.log(123);
		}
		created() {
			// this.$refs.uForm.setRules(this.rules);
		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			//this.$refs.uForm.setRules(this.rules);
			findBranchSite().then((res: any) => {
				// console.log("++++++++++网点类型", JSON.stringify(res.data));
				this.selectList = res.data.data;
				uni.hideLoading();
			});
		}
		//进入地图
		goMap() {
			uni.chooseLocation({
				success: (data) => {
					this.form.storePoint = ''
					this.form.storePoint = data.longitude + "," + data.latitude;
					//submitAddress = "湖北省武汉市江汉区新华下路245号";
					var reg = /.+?(省|市|自治区|自治州|县|区)/g;
					var submitAddress = data.address;
					this.form.province = (submitAddress as any).match(reg)[0]; //	省
					this.form.city = (submitAddress as any).match(reg)[1]; //	市
					this.form.area = (submitAddress as any).match(reg)[2]; // 区
					this.form.storeAddress = this.form.province + this.form.city + this.form.area
					this.form.storeDetailAddress = submitAddress.replace(this.form.storeAddress, '')
				},
			});
	
		}
		
		
		//进入选择网点行业select
		selectShowM() {
			this.selectShow = !this.selectShow;
		}
		//网点行业select的确认事件
		confirmM(data: any) {
			(this.form as any).storeType = data[1].label;
			this.form.storeTypeId = data[1].value;
			// console.log(JSON.stringify(data), "++++++confirmM");
		}
		//进入选择时间select
		timeShowM(value: any) {
			this.timeValue = value
			this.timeShow = !this.timeShow;
		}
		//选择时间select的确认事件
		timeConfirm(e: any) {
			console.log("++++++++++选择时间：", JSON.stringify(e));
			if (this.timeValue == 'start') {
				if (e[0].label == '上午') {
					this.form.storeStart = e[1].label + ":" + e[2].label
				} else if (e[0].label == '下午') {
					this.form.storeStart = parseInt(e[1].label) + 12 + ":" + e[2].label
				}
			} else if (this.timeValue == 'end') {
				if (e[0].label == '上午') {
					this.form.storeEnd = e[1].label + ":" + e[2].label
				} else if (e[0].label == '下午') {
					this.form.storeEnd = parseInt(e[1].label) + 12 + ":" + e[2].label
				}
			}
		}

		addprofitM() {
			var form = {
				shopName: this.form.name,
				phone: this.form.phone,
				account: this.form.intro,
				pwd: this.form.pwd,
				address: this.form.storeDetailAddress,
				coordinate: this.form.storePoint,
				branchName: this.form.storeName,
				contactsPhone: this.form.storePhone,
				provinceName: this.form.province,
				cityName: this.form.city,
				districtName: this.form.area,
				siteId: this.form.storeTypeId,
				siteName: this.form.storeType,
				workingStartTime: this.form.storeStart,
				workingEndTime: this.form.storeEnd
			};

			AppModule.shopInfoAction(form)

			uni.navigateTo({
				url: '../item/modify/set'
			});

		}
	}
</script>

<style lang="scss" scoped>
	.footP {
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.business{
		/deep/ .uni-input-input{
		width: 1rem;
		border: 1px solid #E5E5E5;
		height: 25px;
		width: 53px;
		border-radius: 5px;
		}
		/deep/.u-border-bottom{
			padding: 0;
		}
	}
	
	.item-height {
		padding: 0.07rem 1rem
	}
</style>
